<template>
  <div class="panle competitor g-mt8">
    <h4 class="competitor-title">可能感兴趣的车型<a href="javascript:;" id="J_addCompe" class="more"><span tyle="font-size:1rem;color:grey;">+</span>&nbsp;添加对比</a></h4>
    <div class="competitor-list">
        <dl>
            <dt>
                <ul>
                    <li class="type">车型</li>
                    <li class="heat">热度</li>
                    <li class="cprice">最低净车价</li>
                    <li class="mprice">最低全包售价</li>
                </ul>
            </dt>
            <dd id="J_competitorBox">

                <a href="javascript:;">
                    <ul>
                        <li class="type">
                            <div class="type-box">思域 2016款 220TURBO 自动豪华版</div>
                        </li>
                        <li class="heat">
                            <div><span style="width:100%"></span></div>
                        </li>
                        <li class="cprice">
                            13.99万
                        </li>
                        <li class="mprice"><em>16.50万&nbsp;&nbsp;<span class="icon-you" style="color:#ccc;font-size:0.6rem;"></span></em></li>
                    </ul>
                </a>
            </dd>
            <dd id="J_competitorBox">

                <a href="javascript:;">
                    <ul>
                        <li class="type">
                            <div class="type-box">思域 2016款 220TURBO 自动豪华版</div>
                        </li>
                        <li class="heat">
                            <div><span style="width:100%"></span></div>
                        </li>
                        <li class="cprice">
                            13.99万
                        </li>
                        <li class="mprice"><em>16.50万&nbsp;&nbsp;<span class="icon-you" style="color:#ccc;font-size:0.6rem;"></span></em></li>
                    </ul>
                </a>
            </dd>
            <dd id="J_competitorBox">

                <a href="javascript:;">
                    <ul>
                        <li class="type">
                            <div class="type-box">思域 2016款 220TURBO 自动豪华版</div>
                        </li>
                        <li class="heat">
                            <div><span style="width:100%"></span></div>
                        </li>
                        <li class="cprice">
                            13.99万
                        </li>
                        <li class="mprice"><em>16.50万&nbsp;&nbsp;<span class="icon-you" style="color:#ccc;font-size:0.6rem;"></span></em></li>
                    </ul>
                </a>
            </dd>
            <dd id="J_competitorBox">

                <a href="javascript:;">
                    <ul>
                        <li class="type">
                            <div class="type-box">思域 2016款 220TURBO 自动豪华版</div>
                        </li>
                        <li class="heat">
                            <div><span style="width:100%"></span></div>
                        </li>
                        <li class="cprice">
                            13.99万
                        </li>
                        <li class="mprice"><em>16.50万&nbsp;&nbsp;<span class="icon-you" style="color:#ccc;font-size:0.6rem;"></span></em></li>
                    </ul>
                </a>
            </dd>
            <dd id="J_competitorBox">

                <a href="javascript:;">
                    <ul>
                        <li class="type">
                            <div class="type-box">思域 2016款 220TURBO 自动豪华版</div>
                        </li>
                        <li class="heat">
                            <div><span style="width:100%"></span></div>
                        </li>
                        <li class="cprice">
                            13.99万
                        </li>
                        <li class="mprice"><em>16.50万&nbsp;&nbsp;<span class="icon-you" style="color:#ccc;font-size:0.6rem;"></span></em></li>
                    </ul>
                </a>
            </dd>
        </dl>
    </div>
  </div>
</template>
<script>
export default {
  data() {
      return {
      
      }
  },
  created() { },

  destroyed() {

  }
}
</script>
<style scoped>
  .g-mt8 {
    margin-top: .4rem
  }
  
    .competitor {
        position: relative;
        background-color: #fff
    }

    .competitor h4 {
        padding: .5rem .5rem;
        font-size: .8rem;
        font-weight: 400;
        color: #1a1a1a
    }

    .competitor h4:before {
        bottom: 0;
        content: "";
        background-color: #e5e5e5;
        height: 1px;
        position: absolute;
        left: 0;
        right: 0;
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }

    .competitor h4 a {
        float: right;
        position: relative
        
    }

    .competitor h4 a.more {
        padding-left: .8rem;
        font-size: .7rem;
        margin-top: .05rem
    }

    

    .competitor .competitor-list {
        font-size: .6rem
    }

    .competitor .competitor-list em {
        color: #ff6a27
    }

    .competitor .competitor-list dl {
        width: 100%
    }

    .competitor .competitor-list dt ul {
        width: 100%;
        display: table;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        background: #f5f5f5
    }

    .competitor .competitor-list dt li {
        display: table-cell;
        padding: .35rem 0;
        color: #333333;
        font-size: .5rem;
        text-align: center;
        font-weight: 400
    }

    .competitor .competitor-list dt li.type {
        width: 33%;
        padding-left: 1rem;
        text-align: left
    }

    .competitor .competitor-list dt li.heat {
        width: 15%
    }

    .competitor .competitor-list dt li.cprice {
        width: 25%
    }

    .competitor .competitor-list dt li.mprice {
        padding-right: .6rem
    }

    .competitor .competitor-list dd .none {
        padding: 2rem;
        text-align: center;
        color: #a3a3a3
    }

    .competitor .competitor-list dd a {
        position: relative;
        display: block
    }

    .competitor .competitor-list dd a.iscar {
        background-color: #eee
    }

    .competitor .competitor-list dd a.iscar:after {
        display: none
    }

    .competitor .competitor-list dd ul {
        width: 100%;
        display: table;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        position: relative
    }

    .competitor .competitor-list dd ul:before {
        bottom: 0;
        content: "";
        background-color: #e5e5e5;
        height: 1px;
        position: absolute;
        left: 0;
        right: 0;
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }

    .competitor .competitor-list dd li {
        display: table-cell;
        padding: .35rem 0;
        text-align: center;
        vertical-align: middle
    }

    .competitor .competitor-list dd li.type {
        width: 33%;
        padding-left: .85rem;
        padding-right: .3rem;
        text-align: left
    }

    .competitor .competitor-list dd li.type .type-box {
        display: -webkit-box;
        line-height: .8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box
    }

    .competitor .competitor-list dd li.heat {
        width: 15%
    }

    .competitor .competitor-list dd li.heat div {
        display: inline-block;
        width: 1.25rem;
        height: .15rem;
        background-color: #d5d5d5;
        border-radius: .1rem;
        overflow: hidden
    }

    .competitor .competitor-list dd li.heat div span {
        float: left;
        height: .15rem;
        background-color: #ff3034
    }

    .competitor .competitor-list dd li.cprice {
        width: 25%
    }

    .competitor .competitor-list dd li.cprice p.dis {
        font-size: .5rem
    }

    .competitor .competitor-list dd li.cprice .c-green {
        position: relative;
        padding-left: .55rem;
        color: #0db35f
    }

    .competitor .competitor-list dd li.mprice {
        padding-right: 1rem
    }

    h4{
        margin-bottom:0px!important;
    }
</style>